<template>
    <div class="menu">
        <div class="menu-main">
            <div class="menu-icon" :class="{active: $route.path==='/'}">
                <router-link to="/" class="iconfont">
                    &#xe626;
                    <p>垃圾分类</p>
                </router-link>
            </div>
            <div class="menu-icon" :class="{active: $route.path==='/Mall'}">
                <router-link to="/Mall" class="iconfont">
                    &#xe7a8;
                    <p>积分兑换商城</p>
                </router-link>
            </div>
            <div class="menu-icon" :class="{active: $route.path==='/personal'}" @click="handleGetIntegration()">
                <router-link to="/personal" class="iconfont" >
                    &#xe7ae;
                    <p>个人信息</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { garbageMixin } from '../../utils/mixin'
import { getLocalStorage } from '../../utils/localStorage'

export default {
  mixins: [garbageMixin],
  methods: {
    handleGetIntegration () {
      let sessionId = getLocalStorage('sessionId')
      console.log('hh', sessionId)
      axios.put('/user/updateIntegration', {headers: {'sessionId': sessionId}}).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/global';
.menu {
  z-index: 99;
  width: 100%;
  .menu-main {
      width: 100%;
      height: 46px;
      background: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      border-top: 1px solid #ccc;
      .menu-icon {
          display: inline-block;
          height: 46px;
          width: 32.5%;
          text-align: center;
          font-size: 20px;
          padding-top: 3px;
          a {
              color: #333;
              text-decoration: none;
          }
          p {
              margin-top: 4px;
              font-size: 12px;
          }
        }
    }
}
.active{
  background: skyblue;
}
</style>
